<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			span{
				/*设置好行级元素span为行级块元素
				  这样这个行级元素设置宽高才有效*/
				display: inline-block;
			}
			/*
			 CSS样式有以下三个：
				display:block -- 显示为块级元素
				display:inline -- 显示为内联元素
				display:inline-block -- 显示为内联块元素，表现为同行显示并可修改宽高内外边距等属性
				比如行级元素span,a标签可以同行，但是不能设置宽高(无效)，因此可以设置为行级块元素，既有行级元素效果也有块级元素效果。
				比如块级元素div独占一行，可以设置宽高，但不能同行，设置为行级块元素，或者浮动。
			 * */
			/*
			 两者都可以设置元素是隐藏还是显示。

			display属性设置一个元素的类型是块级还是内联或者设置元素可见还是隐藏，visibility属性指定一个元素应可见还是隐藏。
			隐藏一个元素可以通过把display属性设置为"none"，或把visibility属性设置为"hidden"。但是请注意，这两种方法会产生不同的结果。
			visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。
			display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。
			 * */
		</style>
	</head>
	<body>
		<span >你好啊</span>
	</body>
</html>
